<template> 
  <a-row class="header-box">
    <a-page-header
      :title="$route.meta.title"
    >
    </a-page-header>
  </a-row>
  <a-divider :style="{marginTop:0}" />
  <a-alert
    message="说明："
    type="info"
    show-icon
  > 
    <template v-slot:icon><smile-outlined /></template>
    <template #description>
      <div>通过PT站点RSS拉取种子。</div>
      <div>在【站点配置】中设置站点的rss地址。</div>
    </template>
  </a-alert>
  <a-divider :style="{marginBottom: 0}"/>
  <a-row class="search-box">
    <a-radio-group v-model:value="searchForm.siteid" button-style="solid" @change="reloadData">
      <a-radio-button v-for="site in siteOptions" :key="site.id" :value="site.id" :disabled="!site.rss">{{site.name}}</a-radio-button>
    </a-radio-group>
  </a-row>
  <!-- 操作栏 -->
  <a-row class="operation-box">
    <a-col :span="4">
      <a-input-search
        v-model:value="searchForm.keyword"
        @search="reloadData"
        placeholder=""
        enter-button
        allowClear
      />
    </a-col>
    <a-col :span="20" align='right'>
      <a-space>
        <!-- <a-button type="default" @click="toAdd">
          <template v-slot:icon><plus-outlined/></template>
          新增
        </a-button> -->
        <a-button type="default" @click="reloadData">
          <template v-slot:icon><reload-outlined/></template>
        </a-button>
      </a-space>
    </a-col>
  </a-row>
  <!-- 数据表格 -->
  <a-row class="table-list-box">
      <a-table rowKey="hash" :loading="dataLoading" :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a-space>
              <a-tooltip v-if="record.title" >
                <template v-slot:title>
                  {{ record.title }}
                </template>
                <a :class="record.isAdd? 'normal-text':''" target="_blank" :href="record.link">{{record.title}}</a>
              </a-tooltip>
              <ReadFilled v-if="record.description" @click="showDescription(record)" />
            </a-space>
          </template>
          <template v-else-if="column.key === 'category'">
            {{ categoryMap[record.category] }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button size="small" shape="round" @click="copyAddress(record.address)">
                <template v-slot:icon><CopyFilled /></template>
              </a-button>
              <a-button v-if="!record.isAdd" size="small" shape="round" @click="toAdd(record)">
                <template v-slot:icon><PlusCircleFilled /></template>
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
  </a-row>
  <!-- 新增弹窗 -->
  <AddModal ref="addModal" :success='setAdded' :siteOptions="siteOptions" :categoryOptions="categoryOptions" :clientOptions="clientOptions" :libraryOptions="libraryOptions"/>
  <!-- 种子描述 -->
  <a-drawer
    title="简介-来自站点"
    placement="right"
    :closable="true"
    width="50%"
    v-model:visible="descriptionShow"
  > 
    <a target="_blank" :href="currentRow.link">在原站点打开</a>
    <div v-html="descriptionHtml" class="description-box"></div>
    <a target="_blank" :href="currentRow.link">在原站点打开</a>
  </a-drawer>
</template>

<script>
import BaseApi from '../../api/api.js'
import SearchApi from '../../api/SearchApi.js'
import { SmileOutlined, SearchOutlined, ReloadOutlined, PlusOutlined, CopyFilled, PlusCircleFilled, ReadFilled  } from '@ant-design/icons-vue'
import AddModal from './Add.vue'
import copy from 'copy-to-clipboard'
export default {
  name: 'Rss',
  components: {
    SmileOutlined,
    SearchOutlined,
    ReloadOutlined,
    PlusOutlined,
    CopyFilled,
    PlusCircleFilled,
    ReadFilled,
    AddModal
  },
  data() {
    return {
      module: 'rss',
      siteOptions: [],
      categoryOptions: [],
      clientOptions: [],
      libraryOptions: [],
      categoryMap: {},
      searchForm: {},
      columns: [
        {
          title: '序号',
          fixed: 'left',
          width: 80,
          customRender: ({ index })=>`${index+1}`,
        },
        { 
          title: '标题',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '分类',
          dataIndex: 'category',
          key: 'category',
          width: 120,
        },
        {
          title: 'Action',
          key: 'action',
          fixed: 'right',
          width: 200,
        },
      ],
      dataLoading:false, data:[],
      currentRow: {},
      descriptionShow: false, descriptionHtml: '',
    }
  },
  async mounted() {
    await this.loadOptions()
    // this.loadData()
  },
  methods: {
    async loadOptions() {
      const response1  = await BaseApi.siteOptions()
      this.siteOptions = response1.data.data
      const response2 = await BaseApi.categoryOptions()
      this.categoryOptions = response2.data.data
      this.categoryOptions.forEach(c => this.categoryMap[c.folder] = c.name )
      const response3 = await BaseApi.clientOptions()
      this.clientOptions = response3.data.data
      const response4 = await BaseApi.libraryOptions()
      this.libraryOptions = response4.data.data
    },
    doSearch() {
      // this.data = this.data.filter(item => item.name.indexOf(this.searchForm)>0)
    },
    reloadData(){
      this.data = []
      this.loadData()
    },
    loadData() {
      if (!this.searchForm.siteid) {
        this.$message.warn('请选择搜索站点')
        return
      }
      this.dataLoading = true
      SearchApi.rss(this.searchForm).then(response=>{
        if (response.data.code === 1) {
          this.data = response.data.data
        } else {
          this.$message.error(`数据加载失败：${response.data.message}`)
        }
      }).catch((error)=>{
        this.$message.error(`数据加载失败：${error.message}`)
      }).then(()=>{
        this.dataLoading = false
      })
    },
    showDescription(record) {
      this.currentRow = record
      this.descriptionHtml = record.description
      this.descriptionShow = true
    },
    copyAddress(address) {
      if (address) {
        copy(address)
        this.$message.success('已复制到剪切板')
      }
    },
    toAdd(record) {
      this.currentRow = record
      this.$refs.addModal.open({
        id: '',
        name: record.title,
        hashString: record.hash,
        address: record.address,
        clientid: [],
        categoryid: record.category
      })
    },
    setAdded() {
      this.currentRow.isAdd = true
    }
  }
}
</script>
<style>
.normal-text{
  color: #1c1b1b;
}
.description-box img {
    max-width: 700px;
}
.mtb10 {
  margin: 10px 0;
}
</style>